<template>
  <div id="main" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import {
  getAppInfos
} from '@/api/codeapi'
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { addPrograms } from '../../../../api/addTag'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart('main')
    })
  },
  methods: {
    // 获取饼状图(扇形)
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      getAppInfos({iOrgsysnum:this.$store.getters.iOrgsysnum}).then(res => {
        const chartData = res.dataList;
        const seriesData = [];
        chartData.forEach((item, index) => {
          const outObj = {};
          outObj.value = item.num
          outObj.name = item.strAppname
          seriesData.push(outObj)
        })

        this.chart.setOption({
          /* // 鼠标经过提示内容
             tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b} : {c} ({d}%)'
             },*/
          legend: {
            left: 'center',
            bottom: '10',
            data: seriesData
          },
          series: [
            {
              name: '应用',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '40%'],
              data: seriesData,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,

              label: {
                normal: {
                  trigger: 'item',
                  show: true,
                  textStyle: {
                    fontSize: 12
                  },
                  formatter: '{b}: {c}({d}%)' // 自定义显示格式(b:name, c:value, d:百分比)
                }
              }
            }
          ]
        })

        // chartData.forEach(function(item){
        //   debugger

        //   let valueKey = Object.keys(item);
        //   outObj.value = valueKey[0];
        //   outObj.name = item[valueKey[0]];
        //   seriesData.push(outObj);
        // });

        // console.log(chartData)
        // this.chart.setOption({
        //   series:[
        //     {
        //       name: '应用',
        //       type: 'pie',
        //       roseType: 'radius',
        //       radius: [15, 95],
        //       center: ['50%', '40%'],
        //       data:seriesData,
        //       animationEasing: 'cubicInOut',
        //       animationDuration: 2600
        //     }
        //   ]
        // })
      })
    }
  }
}
</script>
